<template>
  <div class="lease">
    <van-popup v-model="show" closeable  round  class="col-xs-10 col-sm-6 col-md-5" >
      <van-field/>
      <van-cell-group>
        <van-field label="租赁者" :value="dangeLeaseInfo.name" readonly/>
        <van-field label="租赁时间" :value="dangeLeaseInfo.zlsj" readonly />
        <van-field label="服务器IP" :value="dangeLeaseInfo.ip" readonly />
        <van-field label="联系方式" :value="dangeLeaseInfo.lxfs" readonly />
        <van-field label="租赁备注" :value="dangeLeaseInfo.zlbz" readonly />
      </van-cell-group>
      <div class="text-center">
        <van-button type="info" style="margin:10px 10px 10px 0" @click="lease_edit(dangeLeaseInfo)">编辑</van-button>
        <van-button type="danger" style="margin:10px 0 10px 10px" @click="lease_del(dangeLeaseInfo.lease_id)">删除</van-button>
      </div>
    </van-popup>
    <table class="table table-striped table-hover">
      <thead>
      <tr>
        <th>用户名</th>
        <th>服务器IP</th>
        <th>租赁时间</th>
        <th>联系方式</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="v in leaseFinishiAll">
        <td>{{v.name}}</td>
        <td>{{v.ip}}</td>
        <td>{{v.zlsj}}</td>
        <td>{{v.lxfs}}</td>
        <td style="padding-top: 0;padding-bottom:0;vertical-align: middle"><van-button type="info" @click.prevent="longlongsee(v)" size="mini">查看</van-button></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import utils from "@/utils/time"
import qs from 'qs'
import {delServerLease, getServerLeaseFinish} from "../../utils/api";
export default {
  name: "ServerLeaseFinish",
  data(){
    return {
      leaseFinishiAll:[],
      dangeLeaseInfo:[],
      show:false
    }
  },
  methods:{
    longlongsee(v){
      this.show=true;
      this.dangeLeaseInfo=v;
    },
    lease_edit(v){
      this.$router.push({name:"lease_edit",params:{valuse:v}});
    },
    lease_del(v){
      this.$dialog.confirm({
        message: '删除后将无法找回！',
      }).then(() => {
        this.$dialog.confirm({
          message: '您真的确认吗？',
        }).then(() => {
          delServerLease(qs.stringify({id:v})).then(respose=>{
            if(respose.status===200){
              this.$toast.success("删除成功");
              this.show=false;
              this.leaseFinishiAll=this.leaseFinishiAll.filter((item,index,arr)=>{
                return item.lease_id!==v;
              })
            }else{
              this.$toast.fail("删除失败");
            }
          }).catch(error=>{
            console.log(error);
          })
        }).catch(()=>{})
      }).catch(() => {})

    }
  },
  created() {
    getServerLeaseFinish().then(respose=>{
      if(respose.status==200){
        this.leaseFinishiAll=respose?.body;
        this.leaseFinishiAll.map((item)=>{
          item.zlsj = utils.timestampToTime(item.zlsj,5);
        })
      }
    }).catch(error=>{
      console.log(error);
    })
  }
}
</script>

<style scoped>

</style>
